<template>
  <div>
    <template v-if="listData.length > 0">
      <el-row :gutter="24">
        <el-col class="mb20" v-for="(item,index) in listData" :key="index" :span="8">
          <el-card shadow="never" class="list-card">
            <div slot="header" style="text-align: center">
              <span>{{item.evalPlanName}}</span>
              <el-tooltip
                class="item"
                effect="dark"
                v-if="$auth('eval:detail')"
                content="详情"
                placement="top"
              >
                <i @click.stop="handleStart(item)" class="fr curp fs16 el-icon-document" />
              </el-tooltip>
            </div>
            <el-form label-width="130px" label-suffix="：">
              <el-form-item label="任务周期">
                <span>{{ judgeRange(item.evalPlanCycle) }}</span>
              </el-form-item>
              <el-form-item label="任务日期">
                <span>{{ item.startDate ? `${item.startDate}` : null }}{{ item.endDate ? `至${item.endDate}` : null }}</span>
              </el-form-item>
              <el-form-item label="创建人">{{ item.createUser }}</el-form-item>
              <el-form-item label="创建时间">{{ formatTime(item.createTime) }}</el-form-item>
              <el-form-item label="考评形式">{{ item.evalMode === 1 ? '填报' : '巡查' }}</el-form-item>
              <el-form-item label="任务状态">
                <span>
                  <el-tag :type="judgeType(item.state)">{{ judgeState(item.state) }}</el-tag>
                </span>
              </el-form-item>
              <el-form-item label="延期天数">{{ item.delay ? item.delay : 0 }}</el-form-item>
              <el-form-item
                label="考核对象形式"
              >{{ item.targetMode === 1 ? '指定部门' : ( item.targetMode === 2 ? '指定岗位' : '指定人员' ) }}</el-form-item>
              <el-form-item
                v-if="item.targetMode === 1"
                label="部门列表"
              >{{ handleDept( item.evalPlanTargetList ) }}</el-form-item>
              <el-form-item
                v-if="item.targetMode === 3"
                label="人员列表"
              >{{ handlePeople( item.evalPlanTargetList ) }}</el-form-item>
              <el-form-item label="执行对象数">{{item.targetNum}}</el-form-item>
              <el-form-item label="要求对象执行数">{{item.execNum}}</el-form-item>
              <el-form-item label="完成执行对象数">{{item.performNum}}</el-form-item>
              <el-form-item label="进度">
                <el-progress
                  :text-inside="true"
                  color="#52c41a"
                  :percentage="Math.floor(item.progress)"
                  :stroke-width="20"
                  style="margin-top:11px"
                />
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
        <el-col class="tl-center nomoreWord" v-show="noMore">---- 这是我的底线 ----</el-col>
      </el-row>
    </template>

    <template v-else>
      <empty-comp ref="emptyComp" />
    </template>
  </div>
</template>

<script>
import { notFinishedTask } from '@/api/eval'
import { judgeRange, judgeEvalState, judgeType } from '@/utils/util'

export default {
  props: {
    name: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      listData: [],
      total: 1,
      param: {
        pageSize: 10,
        pageNo: 1,
        permissionsType: 3
      },
      noMore: false
    }
  },
  watch: {
    name(n, o) {
      this.name = n
    }
  },
  mounted() {
    this.getNotFinished()
    window.addEventListener('scroll', this.getScroll)
  },
  destroyed() {
    window.removeEventListener('scroll', this.getScroll)
  },
  methods: {
    handleDept(arr) {
      let arr1 = []
      arr.map(v => {
        arr1.push(v.deptName)
      })
      return arr1.join(',')
    },
    handlePeople(arr) {
      let arr1 = []
      arr.map(v => {
        arr1.push(v.name)
      })
      return arr1.join(',')
    },
    getScroll() {
      if (this.name === 'first') {
        if (document.documentElement.scrollTop + document.documentElement.clientHeight >= document.documentElement.scrollHeight) {
          this.loadMore()
        }
      }
    },
    loadMore() {
      console.log('loadMore', this.listData.length, this.total)

      if (this.param.pageNo * 10 > this.total) {
        this.noMore = true
      } else {
        this.param.pageNo += 1
        this.getNotFinished(this.param)
      }
    },
    async getNotFinished(param = {}) {
      this.param = Object.assign(this.param, param)
      const res = await notFinishedTask(this.param)
      if (res && res.data.records.length > 0) {
        if (this.param.pageNo === 1) {
          this.listData = []
          this.listData = [...res.data.records]
        } else {
          this.listData = [...this.listData, ...res.data.records]
        }
        this.total = res.data.total
        if (this.param.pageNo * 10 > this.total) {
          this.noMore = true
        }
      } else {
        this.listData = []
        this.total = 1
      }
    },
    judgeType(num) {
      return judgeType(num)
    },
    judgeState(num) {
      return judgeEvalState(num)
    },
    judgeRange(num) {
      return judgeRange(num)
    },
    handleStart(row) {
      this.$router.push({
        name: 'evaluateTable',
        params: { row }
      })
    },
    handleEdit(bool, row) {
      console.log(bool, row)
    }
  }
}
</script>

<style scoped>
.el-form-item {
  margin-bottom: 2px;
}
</style>